<template>
  <el-table :data="ticketModel.getList()" style="width: 100%;" @row-click="row => $emit('info', row)">
    <el-table-column label="ID" width="300">
      <template #default="scope">
        {{ scope.row.id }}
      </template>
    </el-table-column>
    <el-table-column :label="plugin.lang('ticket.number')">
      <template #default="scope">
        {{ scope.row.number }}<br />
        <el-link v-if="scope.row.number_id" type="warning" href="javascript:;" @click.stop="$emit('number', scope.row.number_id)">{{ scope.row.number_id }}</el-link>
      </template>
    </el-table-column>
    <el-table-column :label="plugin.lang('ticket.type')">
      <template #default="scope">
        <el-tag 
          :type="scope.row.type == 'ticket' ? 'warning' : (scope.row.type == 'print' ? '' : 'danger')" 
          effect="plain"
        >
          {{ plugin.lang('ticket.type_text.' + scope.row.type) }}
        </el-tag>
      </template>
    </el-table-column>
    <el-table-column :label="plugin.lang('ticket.tbai')" width="350">
      <template #default="scope">
        {{ scope.row.tbai }}
      </template>
    </el-table-column>
    <el-table-column :label="plugin.lang('ticket.amount')" prop="money" align="center">
      <template #default="scope">
        <el-link type="primary" href="javascript:;">{{ money(scope.row.amount) }}</el-link>
      </template>
    </el-table-column>
    <el-table-column :label="plugin.lang('ticket.status')" prop="status" />
    <el-table-column :label="plugin.lang('ticket.time')" width="150">
      <template #default="scope">
        {{ time.format(scope.row.created_at) }}
      </template>
    </el-table-column>
    <el-table-column fixed="right" width="150">
      <template #default="scope">
        <div style="text-align: right">
          <el-dropdown @command="command => $emit(command, scope.row)">
            <el-button type="primary" size="small" style="margin-left: 10px" @click.stop>{{ lang.t('common.active') }}<i class="iconfont mini icon-arrow-down el-icon--right"></i></el-button>
            <template #dropdown>
              <el-dropdown-menu>
                <el-dropdown-item command="print">{{ lang.t('common.print') }}</el-dropdown-item>
              </el-dropdown-menu>
            </template>
          </el-dropdown>
        </div>
      </template>
    </el-table-column>
  </el-table>
</template>

<script>
import app from '@/app'
import ticketModel from '../../model/ticket'

export default {
  setup() {
    ticketModel.get()

    return {
      lang: app.lang,
      plugin: app.plugin.index,
      time: app.time,
      money: app.money,
      ticketModel,
    }
  }
}
</script>